{% extends 'base.html' %}

{% block content %}
    <script>
        $('.book').addClass('active')
        $('.index').removeClass('active')
        $('.author').removeClass('active')
        $('.publish').removeClass('active')
    </script>
    <div class="panel panel-primary">
        <div class="panel-heading">图书列表</div>
        <div class="panel-body">
            <a href="/book_add/" class="btn btn-primary pull-right">新增</a>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>id</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>出版日期</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                {% for book in book_list %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ book.name }}</td>
                        <td>{{ book.price }}</td>
                        <td>{{ book.pub_date|date:'Y-m-d' }}</td>
                        <td>
                            {% for author in book.authors.all %}
                                {% if forloop.last %}
                                    {{ author.name }}
                                {% else %}
                                    {{ author.name }}|
                                {% endif %}

                            {% endfor %}
                        </td>
                        <td>{{ book.publish.name }}</td>
                        <td><a href="/book_update/{{ book.pk }}">编辑</a></td>
                        <td><a href="/book_delete/{{ book.pk }}">删除</a></td>


                    </tr>

                {% endfor %}

                </tbody>
            </table>

        </div>
        <div class="panel-footer">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>
    </div>



{% endblock %}